<template>
    <div>
        <a-card :bordered="false">
            <!-- 查询区域 -->
            <div class="table-page-search-wrapper">
                <h2 class="text-center  margin-bottom">{{title}}</h2>
                <a-form layout="inline" @keyup.enter.native="searchQuery">
                    <a-row :gutter="24">
                        <a-col :md="6" :sm="24">
                            <a-form-item label="请选择时间">
                                <a-range-picker
                                        :placeholder="['开始时间', '结束时间']"
                                        v-model="rangeTime"
                                        format="YYYY-MM-DD"
                                        @change="handleDateChange"
                                />
                            </a-form-item>
                        </a-col>

                        <a-col :md="8" :sm="24" v-if="showCompanys">
                            <a-form-item label="处置单位">
                                <select-company-list :companysId="queryParam.companysId" :isInitData="true" @change="changeCompany" @init="initChangeCompany"></select-company-list>
                            </a-form-item>
                        </a-col>

                        <a-col :md="8" :sm="24" v-has="AUTH.SHOW_RECYCLE_USER" >
                            <a-form-item label="回收员姓名:">
                                <select-collector-list :recyclePersonId="queryParam.recyclePersonId" ref="refSelectCollectorList" @change="changeCollectorName"></select-collector-list>
                            </a-form-item>
                        </a-col>

                        <a-col :md="8" :sm="24">
                            <a-form-item label="机构名称">
                                <select-customer-list  @change="changeCustomer"></select-customer-list>
                            </a-form-item>
                        </a-col>

                        <!--<a-col :md="8" :sm="24">-->
                            <!--<a-form-item label="区域查询">-->
                                <!--<select-area ref="selectAreaRef" @change="changeArea"></select-area>-->
                            <!--</a-form-item>-->
                        <!--</a-col>-->
                    </a-row>
                </a-form>
            </div>
            <!-- 查询区域-END -->

            <!-- 操作按钮区域 -->
            <div class="table-operator" style="display: flex;justify-content: space-between;align-items: center;">
                <div>
                    <a-button type="primary" @click="searchQuery" icon="search">查询数据列表</a-button>
                    <!--<a-button type="primary" @click="resetForm">重置查询</a-button>-->
                </div>
                <div>
                    <a-button type="primary" icon="printer" v-print="'#printTableList'">打印</a-button>
                    <a-button type="primary" icon="download"
                              @click="handleMwExportXlsForImages">
                        导出Excel
                    </a-button>
                </div>
            </div>

            <!-- table区域-begin -->
            <div>
                <a-table
                        ref="table"
                        size="middle"
                        :scroll="{x:true}"
                        bordered
                        rowKey="id"
                        :columns="columns"
                        :dataSource="dataSource"
                        :pagination="ipagination"
                        :loading="loading"
                        class="j-table-force-nowrap"
                        @change="handleTableChange">

                    <template slot="htmlSlot" slot-scope="text">
                        <div v-html="text"></div>
                    </template>
                    <template slot="imgSlot" slot-scope="text">
                        <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                        <img v-else :src="getImgView(text)" height="25px" alt=""
                             style="max-width:80px;font-size: 12px;font-style: italic;"/>
                    </template>
                    <template slot="fileSlot" slot-scope="text">
                        <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
                        <a-button
                                v-else
                                :ghost="true"
                                type="primary"
                                icon="download"
                                size="small"
                                @click="downloadFile(text)">
                            下载
                        </a-button>
                    </template>

                    <span slot="action" slot-scope="text, record">
                    <a @click="handleEdit(record)">编辑</a>
                    <a-divider type="vertical"/>
                    <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                      <a>删除</a>
                    </a-popconfirm>
                </span>

                </a-table>
            </div>

            <div v-show="false">
                <div id="printTableList">
                    <h2 style="text-align: center;font-weight: bold;">{{title}}</h2>
                    <h3 v-if="rangeTime.length">时间 ： {{rangeTime[0]}} 至 {{rangeTime[1]}}</h3>
                    <a-table
                            size="small"
                            bordered
                            rowKey="id"
                            :columns="columns"
                            :dataSource="dataSource"
                            :pagination="false"
                    >
                        <template slot="htmlSlot" slot-scope="text">
                            <div style="color: black !important;" v-html="text"></div>
                        </template>
                    </a-table>
                </div>
            </div>
        </a-card>
    </div>
</template>

<script>
    /**
     * create by Yang
     * 打卡明细
     */
    import '@/assets/less/TableExpand.less'
    import { mixinDevice } from '@/utils/mixin'
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import SelectArea from '@/components/Jane/SelectArea'
    import SelectCompanyList from '@/components/Jane/SelectCompanyList'
    import SelectCustomerList from '@/components/Jane/SelectCustomerList'
    import SelectCollectorList from '@/components/Jane/SelectCollectorList'
    import { downloadFile } from '@/api/manage' // 模糊下拉查询
    import { GET_USER_AUTH } from '@/utils/util'
    export default {
        name: 'ClockInDetail',
        mixins: [JeecgListMixin, mixinDevice],
        components: {
            SelectArea,
            SelectCompanyList,
            SelectCustomerList,
            SelectCollectorList
        },
        data() {
            return {
                title: '打卡数据明细',
                rangeTime : [],
                queryParam:{
                    creatTimeBegin : null,
                    creatTimeEnd : null,
                },
                // 表头
                columns: [],
                url: {
                    list: '',
                    exportXlsUrlOkForImages: '/hc/hcAnomaly/exportList'
                },
                AUTH:{
                    SHOW_RECYCLE_USER : 'show:recycles:user'
                },
            }
        },
        computed:{
            // 是否显示处置单位的筛选条件
            showCompanys(){
                let state = true;
                let userInfo = this.$store.getters.userInfo
                if(userInfo.companysId){
                    state = false;
                }
                return state;
            },
        },
        methods: {
            // 初始化配置信息
            async initDictConfig() {
                // 获取到用户登陆的信息
                let userInfo = this.$store.getters.userInfo
                // 如果用户有处置单位
                if (userInfo.companysId) {
                    // 则用户的处置单位id为参数companysId
                    this.queryParam.companysId = userInfo.companysId;
                    if (GET_USER_AUTH(this.AUTH.SHOW_RECYCLE_USER)) {
                        await this.refreshRecycleUser();
                    } else {
                        this.queryParam.recyclePersonId = userInfo.id;
                    }
                }

                this.queryParam.creatTimeBegin = new Date().MonthFirstDay()
                this.queryParam.creatTimeEnd = new Date().MonthLastDay()
                this.rangeTime = [this.queryParam.creatTimeBegin, this.queryParam.creatTimeEnd]
                // if (userInfo.cityCode) {
                //     this.queryParam.cityCode = userInfo.cityCode
                // }
                // if (userInfo.areaCode) {
                //     this.queryParam.areaCode = userInfo.areaCode
                // }
                this.setColums();
            },
            setColums(){
                this.columns = [
                    {
                        title: '序号',
                        dataIndex: 'id',
                        key: 'rowIndex',
                        width: 60,
                        align: 'center',
                        customRender: function(t, r, index) {
                            return parseInt(index) + 1
                        }
                    },
                    {
                        title: '时间',
                        align: 'center',
                        dataIndex: 'createTime',

                    },
                    {
                        title: '回收员',
                        align: 'center',
                        dataIndex: 'recyclePersonName_dictText',

                    },
                    {
                        title: '机构名称',
                        align: 'center',
                        dataIndex: 'customerNumber_dictText'
                    },
                    {
                        title: '打卡地址',
                        align: 'center',
                        dataIndex: 'address',

                    },
                    {
                        title: '打卡信息',
                        align: 'center',
                        dataIndex: 'abnormalRemark'
                    },
                ]
            },
            // 查询回收员信息
            async refreshRecycleUser(){
                this.url.list = '/hc/hcAnomaly/list';
                let _this = this;
                setTimeout(async() => {
                    let ref = await _this.$refs.refSelectCollectorList;
                    if(ref && ref.initData && _this.queryParam.companysId){
                        await  ref.initData(_this.queryParam.companysId);
                    }
                },500)

            },

            // 选择处置单位
            async changeCompany(value) {
                this.queryParam.companysId = value;
                this.queryParam.recyclePersonId = '';
                await this.refreshRecycleUser();
                this.searchQuery()
            },
            // 选择产生单位
            async changeCustomer(value,option) {
                this.queryParam.customerNumber = value;
            },

            // 选择时间
            handleDateChange(value, dateString) {
                this.rangeTime = dateString
                if (dateString[0]) {
                    this.queryParam.creatTimeBegin = dateString[0]
                }
                if (dateString[1]) {
                    this.queryParam.creatTimeEnd = dateString[1]
                }
            },

            // 选择回收员
            changeCollectorName(value,option){
                this.queryParam.recyclePersonId = value;
            },

            // 选择区域
            // async changeArea({ area,city }){
            //     if(city){
            //         this.queryParam.cityCode = city;
            //     }
            //     if(area){
            //         this.queryParam.areaCode = area;
            //     }
            // },
            // 查询数据
            searchQuery: function() {
                this.loadData(1)
            },
            // 重置筛选表单
            // resetForm: function() {
            //     // this.queryParam.cityCode = '';
            //     // this.queryParam.areaCode = '';
            //     this.queryParam.recyclePersonId = '';
            //     this.queryParam.customerNumber = '';
            //     // this.queryParam.companysId = '';
            //     // let ref = this.$refs.selectAreaRef;
            //     // if(ref && ref.clearSelectArea != undefined){
            //     //     ref.clearSelectArea();
            //     // }
            //     this.loadData(1)
            // },

            // 导出
            handleMwExportXlsForImages() {
                let param = { ...this.queryParam }
                let name = `打卡数据明细-${new Date().FormatDate()}.xls`
                downloadFile(this.url.exportXlsUrlOkForImages, name, param)
            },


        }
    }
</script>

<style scoped>

</style>
